<i18n locale="en" lang="yaml">
renameTipSyncAPI : 'Called "Auth Link" in the old version. We have adjusted the naming for ease of understanding'
renameTipAsyncAPI: 'Called "Batch" in the old version. We have adjusted the naming for ease of understanding'
renameTipCronJob : 'Called "Crontab Config" in the old version. We have adjusted the naming for ease of understanding'
</i18n>

<i18n locale="zh-CN" lang="yaml">
renameTipSyncAPI : 在旧版中称为「授权链接」。为了便于理解，我们调整了命名
renameTipAsyncAPI: 在旧版中称为「批处理」。为了便于理解，我们调整了命名
renameTipCronJob : 在旧版中称为「自动触发配置」。为了便于理解，我们调整了命名
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
renameTipAsyncAPI: 在舊版中稱為「批處理」。為了便於理解，我們調整了命名
renameTipCronJob: 在舊版中稱為「自動觸發配置」。為了便於理解，我們調整了命名
renameTipSyncAPI: 在舊版中稱為「授權鏈接」。為了便於理解，我們調整了命名
</i18n>
<i18n locale="zh-TW" lang="yaml">
renameTipAsyncAPI: 在舊版中稱為「批處理」。為了便於理解，我們調整了命名
renameTipCronJob: 在舊版中稱為「自動觸發配置」。為了便於理解，我們調整了命名
renameTipSyncAPI: 在舊版中稱為「授權連結」。為了便於理解，我們調整了命名
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <el-container direction="horizontal">
    <!-- Secondary navi -->
    <el-aside width="auto">
      <div class="aside">
        <div class="aside-content">
          <el-menu
            mode="vertical"
            :unique-opened="true"
            :default-active="$route.path"
            @select="onNaviMenuSelect">
            <el-menu-item index="/management/overview">
              <span>
                <i class="fa fa-fw fa-dashboard"></i>
                {{ $t('Overview') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/about">
              <span>
                <i class="fa fa-fw fa-info-circle"></i>
                {{ $t('About') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/system-setting" v-if="$store.getters.isAdmin">
              <span>
                <i class="fa fa-fw fa-cog"></i>
                {{ $t('System Setting') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/user-list" v-if="$store.getters.isAdmin">
              <span>
                <i class="fa fa-fw fa-users"></i>
                {{ $t('User Manage') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/api-auth-list">
              <span>
                <i class="fa fa-fw fa-lock"></i>
                {{ $t('API Auth') }}
              </span>
            </el-menu-item>

            <el-tooltip effect="dark" :content="$t('renameTipSyncAPI')" placement="right">
              <el-menu-item index="/management/sync-api-list">
                <span>
                  <i class="fa fa-fw fa-link"></i>
                  {{ $t('Sync API') }}
                  <i class="fa fa-fw fa-question-circle text-main"></i>
                </span>
              </el-menu-item>
            </el-tooltip>

            <el-tooltip effect="dark" :content="$t('renameTipAsyncAPI')" placement="right">
              <el-menu-item index="/management/async-api-list">
                <span>
                  <i class="fa fa-fw fa-tasks"></i>
                  {{ $t('Async API') }}
                  <i class="fa fa-fw fa-question-circle text-main"></i>
                </span>
              </el-menu-item>
            </el-tooltip>

            <el-tooltip effect="dark" :content="$t('renameTipCronJob')" placement="right">
              <el-menu-item index="/management/cron-job-list">
                <span>
                  <i class="fa fa-fw fa-clock-o"></i>
                  {{ $t('Cron Job') }}
                  <i class="fa fa-fw fa-question-circle text-main"></i>
                </span>
              </el-menu-item>
            </el-tooltip>

            <el-menu-item index="/management/script-set-export-history-list">
              <span>
                <i class="fa fa-fw fa-cloud-download"></i>
                {{ $t('Script Set Export') }}
              </span>
            </el-menu-item>
            <el-menu-item index="/management/script-set-import-history-list">
              <span>
                <i class="fa fa-fw fa-cloud-upload"></i>
                {{ $t('Script Set Import') }}
              </span>
            </el-menu-item>
            <el-menu-item index="/management/script-recover-point-list">
              <span>
                <i class="fa fa-fw fa-history"></i>
                {{ $t('Script Lib Recover') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/operation-record-list">
              <span>
                <i class="fa fa-fw fa-keyboard-o"></i>
                {{ $t('Operation Records') }}
              </span>
            </el-menu-item>

            <el-menu-item index="/management/experimental-features">
              <span>
                <i class="fa fa-fw fa-flask"></i>
                {{ $t('Experimental Features') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('PIPTool')"
              class="indent-menu" index="/management/pip-tool">
              <span>
                <i class="fa fa-fw fa-cubes"></i>
                {{ $t('PIP Tool') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('FileService')"
              class="indent-menu" index="/management/file-service-list">
              <span>
                <i class="fa fa-fw fa-folder-open"></i>
                {{ $t('File Service') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('FileManager')"
              class="indent-menu" index="/management/file-manager">
              <span>
                <i class="fa fa-fw fa-file"></i>
                {{ $t('File Manager') }}
              </span>
            </el-menu-item>
            <el-menu-item v-if="$store.getters.showExperimentalFeature('FuncCacheManager')"
              class="indent-menu" index="/management/func-cache-manager">
              <span>
                <i class="fa fa-fw fa-dot-circle-o"></i>
                {{ $t('Func Cache Manager') }}
              </span>
            </el-menu-item>
            <el-menu-item v-if="$store.getters.showExperimentalFeature('FuncStoreManager')"
              class="indent-menu" index="/management/func-store-manager">
              <span>
                <i class="fa fa-fw fa-database"></i>
                {{ $t('Func Store Manager') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('FuncDoc')"
              class="indent-menu" :index="`${T.getBaseURL()}/#/func-doc`">
              <span>
                <i class="fa fa-fw fa-book"></i>
                {{ $t('Func Docs') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('FuncAPIDoc')"
              class="indent-menu" :index="`${T.getBaseURL()}/#/func-api-doc`">
              <span>
                <i class="fa fa-fw fa-link"></i>
                {{ $t('Func API Doc') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('OpenAPIDoc')"
              class="indent-menu" :index="`${T.getBaseURL()}/doc/`">
              <span>
                <i class="fa fa-fw fa-book"></i>
                {{ $t('Open API Doc') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.showExperimentalFeature('ScriptPublishHistory')"
              class="indent-menu" index="/management/script-publish-history-list">
              <span>
                <i class="fa fa-fw fa-coffee"></i>
                {{ $t('Script Publish History') }}
              </span>
            </el-menu-item>

            <el-menu-item v-if="$store.getters.isAdmin && $store.getters.showExperimentalFeature('AccessKeys')"
              class="indent-menu" index="/management/access-key-list">
              <span>
                <i class="fa fa-fw fa-key"></i>
                {{ $t('Access Keys') }}
              </span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-aside>

    <router-view />
  </el-container>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Management',
  components: {
  },
  watch: {
  },
  methods: {
    onNaviMenuSelect(index) {
      if (!index) return;

      if (this.T.startsWith(index, '/')) {
        this.$router.push({ path: index });
      } else {
        this.T.openURL(index);
      }
    },
  },
  computed: {
  },
  props: {
  },
  data() {
    return {}
  },
  created() {
  },
}
</script>

<style scoped>
.aside {
  margin-top: 40px;
  margin-bottom: 40px;
}
.aside-content {
  height: 100%;
}
.aside .el-menu-item {
  padding-right: 40px;
}
.aside .indent-menu.el-menu-item {
  padding-left: 40px !important;
}
</style>
